<script setup lang="ts">
import { ref, provide, onMounted, reactive, nextTick } from 'vue'
import { onReady, onShow, onLoad } from '@dcloudio/uni-app'
import couponListItem from './components/coupon-list-item.vue'
import { useCouponNumStore } from '@/stores'

type CouponListItemMethods = { getMyCoupons(): void }[]
// 渲染 Tab 界面
const activeIndex = ref(0)
const couponListItemRef = ref<InstanceType<typeof couponListItem> & CouponListItemMethods>()
const query = defineProps<{
  params?: any
}>()
onLoad(() => {
  useCouponNumStore().isCouponNum = false
})
let _param: any
onShow(() => {
  _param = JSON.parse(decodeURIComponent(query?.params))
  if (_param) {
    tabsList.value = [
      { title: '可使用', parm: 'CanBeUsed' },
      { title: '不可使用', parm: 'CantUsed' },
    ]
    console.log('tabsList', tabsList.value)
  }
})

const tabsList = ref<
  {
    title: string
    count?: number
    parm: string
  }[]
>([
  { title: '待使用', parm: 'NotStart', count: 0 },
  { title: '已失效', parm: 'Used', count: 0 },
  { title: '已过期', parm: 'Expired', count: 0 },
])
/** 滑动切换 */
const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
  if (couponListItemRef.value) {
    couponListItemRef.value[ev.detail.current]?.getMyCoupons()
  }
}
onReady(() => {
  nextTick(() => {
    if (couponListItemRef.value) {
      console.log('couponListItemRef', couponListItemRef.value)
      couponListItemRef.value[0]?.getMyCoupons()
    }
  })
})
/**
 * * 通过 ref 获取组件实例
 */
const refPopup = ref()
const rules = ref()
/**
 * * 调用组件内的 打开弹窗
 */
const popupOpenFn = reactive({
  valueTransfer: (item: any) => {
    console.log(item)
    rules.value = item
    refPopup.value.popupOpen()
  },
})

provide('popupObj', popupOpenFn) // 向下级组件进行传值
</script>

<template>
  <view class="goodsCoupon">
    <view v-if="!query.params" class="navigationBar">
      <view
        class="_view"
        :class="{ active: index === activeIndex }"
        v-for="(item, index) in tabsList"
        :key="item.title"
        @tap="activeIndex = index"
        >{{ item.title }}
        <text class="subscriptLine"></text>
      </view>
    </view>
    <!-- tab 栏切换 -->
    <view v-else class="hearTab">
      <text
        class="textTab"
        :class="{ active: index === activeIndex }"
        v-for="(item, index) in tabsList"
        :key="item.title"
        @tap="activeIndex = index"
        >{{ item.title }}</text
      >
    </view>
    <swiper
      class="swiper"
      :autoplay="false"
      :current="activeIndex"
      :circular="false"
      @change="onChange"
    >
      <swiper-item v-for="goods in tabsList" :key="goods.title" class="swiper-item">
        <scroll-view class="scroll" scroll-y>
          <couponListItem ref="couponListItemRef" :params="_param" :parm="goods.parm" />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
  <BjsRulePopup ref="refPopup" :rules="rules" />
</template>

<style lang="scss">
//
page {
  background-color: $uni-bg-color-grey;
  height: 100%;
}
// 我的优惠券
.userCoupon {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll_view {
  flex: 1;
  padding-bottom: 60rpx;
}
// 没有优惠券的css
.vacancy {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .else_image {
    margin: 304rpx auto 0;
    width: 376rpx;
    height: 326rpx;
  }
  .else_text {
    margin: 48rpx auto;
    color: $uni-text-color-grey;
    font-size: 28rpx;
  }
}
// 订单页面跳转过来的
.goodsCoupon {
  height: 100%;
  display: flex;
  flex-direction: column;
  .navigationBar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 36rpx 90rpx 0 90rpx;
    width: 100%;
    height: 96rpx;
    font-size: 28rpx;
    background-color: #fff;
    color: $uni-text-color-grey;
    ._view {
      position: relative;
      min-width: 100rpx;
      height: 60rpx;
    }
    .active {
      position: relative;
      color: #000;
      font-weight: bold;
      .subscriptLine {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-60%);
        width: 60rpx;
        border-bottom: 6rpx solid $uni-color-motif;
      }
    }
  }
  .swiper {
    flex: 1;
    .swiper-item {
      height: 100%;
      .scroll {
        height: 100%;
        padding-bottom: 60rpx;
      }
    }
  }
}
// 头部导航栏
.hearTab {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60rpx;
  color: #00000080;
  background-color: #fff;
  box-sizing: border-box;
  padding-bottom: 4rpx;
  .textTab {
    padding-bottom: 16rpx;
  }
  .active {
    color: $uni-color-motif;
    border-bottom: 4rpx solid $uni-color-motif;
  }
}
</style>
